<template>
  <div class="app-container">
    <div style="margin-bottom: 4px;">
      <el-select v-model="mealType" @change="mealTypeChange()">
        <el-option v-for="item in mealTypeList" :key="item.mealType" :value="item.mealType" :label="item.mealBelong+'('+item.mealType+')'"></el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="handleAdd()">新增套餐</el-button>
      <el-button type="primary" size="mini" @click="handleShowCoverage()">保额设置</el-button>
    </div>
    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="套餐名称">
        <template slot-scope="scope">
          {{scope.row.mealName}}
        </template>
      </el-table-column>
      <el-table-column label="套餐类型">
        <template slot-scope="scope">
          <span>{{scope.row.mealType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="保险范围">
        <template slot-scope="scope">
          <span>{{scope.row.mealScope}}</span>
        </template>
      </el-table-column>
      <el-table-column label="套餐所属保险公司">
        <template slot-scope="scope">
          <span>{{scope.row.mealBelong}}</span>
        </template>
      </el-table-column>
      <el-table-column label="适用车型">
        <template slot-scope="scope">
          <span>{{scope.row.country}}</span>
        </template>
      </el-table-column>
      <el-table-column label="新车标志">
        <template slot-scope="scope">
          <span>{{scope.row.isNew}}</span>
        </template>
      </el-table-column>
      <el-table-column label="范围">
        <template slot-scope="scope">
          <span>{{'车龄：'+scope.row.carAgeRange + '\n 里程：'+scope.row.mileageRange}}</span>
        </template>
      </el-table-column>
      <el-table-column label="限额">
        <template slot-scope="scope">
          <span>{{scope.row.maxPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditPrice(scope.$index, scope.row)">价格设置</el-button>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑套餐</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 价格设置列表 -->
    <el-dialog title="价格设置" :visible.sync="dialogFormVisible" width="80%" top="20px">
      <el-button type="primary" size="mini" @click="handlePriceAdd()">新增</el-button>
      <el-table ref="setMealTable" :data="priceList" v-loading="priceListLoading" height="600" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="套餐类型">
          <template slot-scope="scope">
            <span>{{scope.row.mealType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="保险范围">
          <template slot-scope="scope">
            <span>{{scope.row.mealScope}}</span>
          </template>
        </el-table-column>
        <el-table-column label="延保年限">
          <template slot-scope="scope">
            <span>{{scope.row.insuranceYear}}</span>
          </template>
        </el-table-column>
        <el-table-column label="国别">
          <template slot-scope="scope">
            <span>{{scope.row.country}}</span>
          </template>
        </el-table-column>
        <el-table-column label="具体车型">
          <template slot-scope="scope">
            <span>{{(scope.row.carBrandName?scope.row.carBrandName:'') + ' ' + (scope.row.carSeriesName?scope.row.carSeriesName:'') + ' ' + (scope.row.carModelName?scope.row.carModelName:'')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="新车标志">
          <template slot-scope="scope">
            <span>{{scope.row.isNew}}</span>
          </template>
        </el-table-column>
        <el-table-column label="范围">
          <template slot-scope="scope">
            <span>{{scope.row.carAgeRange + scope.row.mileageRange}}</span>
          </template>
        </el-table-column>
        <el-table-column label="功率范围">
          <template slot-scope="scope">
            <span>{{scope.row.powerRange}}</span>
          </template>
        </el-table-column>
        <el-table-column label="购置价范围">
          <template slot-scope="scope">
            <span>{{scope.row.priceRange}}</span>
          </template>
        </el-table-column>
        <el-table-column label="份数">
          <template slot-scope="scope">
            <span>{{scope.row.quantity}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 保额设置列表 -->
    <el-dialog title="保额设置" :visible.sync="dialogCoverageVisible" width="80%" top="20px">
      <el-button type="primary" size="mini" @click="handleCoverageAdd()">新增</el-button>
      <el-table ref="coverageTable" :data="coverageList" v-loading="coverageListLoading" height="600" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="套餐类型">
          <template slot-scope="scope">
            <span>{{scope.row.mealType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="车型">
          <template slot-scope="scope">
            <span>{{scope.row.carModelName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="车系">
          <template slot-scope="scope">
            <span>{{scope.row.carSeriesName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.carBrandName?scope.row.carBrandName:'' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="国别">
          <template slot-scope="scope">
            <span>{{scope.row.country}}</span>
          </template>
        </el-table-column>
        <el-table-column label="里程范围">
          <template slot-scope="scope">
            <span>{{scope.row.mileageRange}}</span>
          </template>
        </el-table-column>
        <el-table-column label="份数">
          <template slot-scope="scope">
            <span>{{scope.row.quantity}}</span>
          </template>
        </el-table-column>
        <el-table-column label="保额类型">
          <template slot-scope="scope">
            <span>{{scope.row.priceType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="保额">
          <template slot-scope="scope">
            <span>{{scope.row.insurancePrice}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCoverageVisible = false">取 消</el-button>
        <!--<el-button type="primary" @click="submitCoverage()">确 定</el-button>-->
      </div>
    </el-dialog>

    <!-- 新增，编辑套餐 -->
    <el-dialog :title="dialogEditTitle" :visible.sync="dialogEditVisible">
      <el-form :model="editForm">
        <el-form-item label="套餐类型" :label-width="formLabelWidth">
          <el-select v-model="editForm.type">
            <el-option :key="1" :value="1" label="普通类型"></el-option>
            <el-option :key="2" :value="2" label="按份数类型"></el-option>
          </el-select>
          <span style="width: 20px;display: inline-block;"></span>
          品牌国家
          <el-select v-model="editForm.country">
            <el-option key="CHINA" value="CHINA" label="国产"></el-option>
            <el-option key="KKC" value="KKC" label="日韩"></el-option>
            <el-option key="EUROPE" value="EUROPE" label="欧美"></el-option>
            <el-option key="ALL" value="ALL" label="全部"></el-option>
            <el-option key="OTHER" value="OTHER" label="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐编号" :label-width="formLabelWidth">
          <el-input v-model="editForm.mealType"></el-input>
        </el-form-item>
        <el-form-item label="套餐名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.mealName"></el-input>
        </el-form-item>
        <el-form-item label="保险范围" :label-width="formLabelWidth">
          <el-input v-model="editForm.mealScope"></el-input>
        </el-form-item>
        <el-form-item label="所属保险公司" :label-width="formLabelWidth">
          <el-input v-model="editForm.mealBelong"></el-input>
        </el-form-item>
        <el-form-item label="延长公里数形式" :label-width="formLabelWidth">
          <el-select v-model="editForm.extendMilesType">
            <el-option :key="1" :value="1" label="延长到"></el-option>
            <el-option :key="2" :value="2" label="延长"></el-option>
          </el-select>
          <span style="width: 20px;display: inline-block;"></span>
          新车标志
          <el-select v-model="editForm.isNew">
            <el-option :key="1" :value="1" label="新车"></el-option>
            <el-option :key="0" :value="0" label="旧车"></el-option>
            <el-option :key="2" :value="2" label="全部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="延长公里数" :label-width="formLabelWidth">
          <el-input v-model="editForm.extendMiles" type="number"></el-input>
        </el-form-item>
        <el-form-item label="延长年数" :label-width="formLabelWidth">
          <el-input v-model="editForm.extendYear" type="number"></el-input>
        </el-form-item>
        <el-form-item label="份数" :label-width="formLabelWidth">
          <el-input v-model="editForm.quantity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="车龄范围" :label-width="formLabelWidth">
          <el-input v-model="editForm.carAgeRange" placeholder="例如,0到3年内：[0,36)"></el-input>
        </el-form-item>
        <el-form-item label="里程范围" :label-width="formLabelWidth">
          <el-input v-model="editForm.mileageRange" placeholder="例如,0到10万公里内：[0,10)"></el-input>
        </el-form-item>
        <el-form-item label="购置价范围" :label-width="formLabelWidth">
          <el-input v-model="editForm.priceRange" placeholder="例如,0到50万：[0,50)"></el-input>
        </el-form-item>
        <el-form-item label="额外天数" :label-width="formLabelWidth">
          <el-input v-model="editForm.extraDay" type="number" placeholder="不允许额外天数请填写0"></el-input>
        </el-form-item>
        <el-form-item label="限额" :label-width="formLabelWidth">
          <el-input v-model="editForm.maxPrice" type="number" placeholder="不限额请填写0"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="editForm.zindex" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增，编辑价格 -->
    <el-dialog :title="dialogPriceTitle" :visible.sync="dialogPriceVisible">
      <el-form :model="priceForm">
        <el-form-item label="品牌国家" :label-width="formLabelWidth">
          <el-select v-model="priceForm.country">
            <el-option key="CHINA" value="CHINA" label="国产"></el-option>
            <el-option key="KKC" value="KKC" label="日韩"></el-option>
            <el-option key="EUROPE" value="EUROPE" label="欧美"></el-option>
            <el-option key="ALL" value="ALL" label="全部"></el-option>
            <el-option key="OTHER" value="OTHER" label="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐编号" :label-width="formLabelWidth">
          <el-input v-model="priceForm.mealType"></el-input>
        </el-form-item>
        <el-form-item label="保险范围" :label-width="formLabelWidth">
          <el-input v-model="priceForm.mealScope"></el-input>
        </el-form-item>
        <el-form-item label="新车标志" :label-width="formLabelWidth">
          <el-select v-model="priceForm.isNew">
            <el-option :key="1" :value="1" label="新车"></el-option>
            <el-option :key="0" :value="0" label="旧车"></el-option>
            <el-option :key="2" :value="2" label="全部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="延长年数" :label-width="formLabelWidth">
          <el-input v-model="priceForm.insuranceYear" type="number"></el-input>
        </el-form-item>
        <el-form-item label="份数" :label-width="formLabelWidth">
          <el-input v-model="priceForm.quantity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="车龄范围" :label-width="formLabelWidth">
          <el-input v-model="priceForm.carAgeRange"></el-input>
        </el-form-item>
        <el-form-item label="里程范围" :label-width="formLabelWidth">
          <el-input v-model="priceForm.mileageRange"></el-input>
        </el-form-item>
        <el-form-item label="购置价范围" :label-width="formLabelWidth">
          <el-input v-model="priceForm.priceRange"></el-input>
        </el-form-item>
        <el-form-item label="功率范围" :label-width="formLabelWidth">
          <el-input v-model="priceForm.powerRange"></el-input>
        </el-form-item>
        <el-form-item label="具体车款" :label-width="formLabelWidth">
          <el-select v-model="priceForm.carBrandId" @change="changeCar(1)">
            <el-option :key="0" :value="0" label="全部"></el-option>
            <el-option v-for="item in brandList" :key="item.brandId" :value="item.brandId" :label="item.brandName"></el-option>
          </el-select>
          <el-select v-model="priceForm.carSeriesId" @change="changeCar(2)">
            <el-option :key="0" :value="0" label="全部"></el-option>
            <el-option v-for="item in seriesList" :key="item.seriesId" :value="item.seriesId" :label="item.seriesName"></el-option>
          </el-select>
          <el-select v-model="priceForm.carModelId" @change="changeCar(3)">
            <el-option :key="0" :value="0" label="全部"></el-option>
            <el-option v-for="item in modelList" :key="item.modelId" :value="item.modelId" :label="item.modelName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="priceForm.price" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPriceVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPrice()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增，编辑保额 -->
    <el-dialog :title="dialogCoverageTitle" :visible.sync="dialogCoverageFormVisible">
      <el-form :model="coverageForm" :rules="rules" ref="coverageForm">
        <el-form-item label="品牌国家" :label-width="formLabelWidth" prop="required">
          <el-select v-model="coverageForm.country">
            <el-option key="CHINA" value="CHINA" label="国产"></el-option>
            <el-option key="KKC" value="KKC" label="日韩"></el-option>
            <el-option key="EUROPE" value="EUROPE" label="欧美"></el-option>
            <el-option key="ALL" value="ALL" label="全部"></el-option>
            <el-option key="OTHER" value="OTHER" label="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐编号" :label-width="formLabelWidth">
          <el-input v-model="coverageForm.mealType" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="份数" :label-width="formLabelWidth" prop="required">
          <el-input v-model="coverageForm.quantity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="里程范围" :label-width="formLabelWidth" prop="required">
          <el-input v-model="coverageForm.mileageRange"></el-input>
        </el-form-item>
        <el-form-item label="具体车款" :label-width="formLabelWidth">
          <el-select v-model="coverageForm.carBrandId" @change="changeCar(1)">
            <el-option :key="0" :value="0" label="全部"></el-option>
            <el-option v-for="item in brandList" :key="item.brandId" :value="item.brandId" :label="item.brandName"></el-option>
          </el-select>
          <el-select v-model="coverageForm.carSeriesId" @change="changeCar(2)">
            <el-option :key="0" :value="0" label="全部"></el-option>
            <el-option v-for="item in seriesList" :key="item.seriesId" :value="item.seriesId" :label="item.seriesName"></el-option>
          </el-select>
          <el-select v-model="coverageForm.carModelId" @change="changeCar(3)">
            <el-option :key="0" :value="0" label="全部"></el-option>
            <el-option v-for="item in modelList" :key="item.modelId" :value="item.modelId" :label="item.modelName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保额类型" :label-width="formLabelWidth" prop="required">
          <el-select v-model="coverageForm.priceType">
            <el-option :key="1" :value="1" label="直接保额"></el-option>
            <el-option :key="2" :value="2" label="购置价百分比"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保额" :label-width="formLabelWidth" prop="required">
          <el-input v-model="coverageForm.insurancePrice" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCoverageFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCoverage('coverageForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { setMealApi } from '@/api/setMeal'

  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        dialogFormVisible: false,
        dialogEditVisible: false,
        dialogCoverageVisible: false,
        dialogCoverageFormVisible: false,
        dialogEditTitle: '',
        formLabelWidth: '120px',
        codeDisabled: true,
        mealTypeList: [], // 套餐类型选择框
        mealType: '', // 套餐类型选中数据
        setMeal2Price: null,
        listSetMeal: [],
        priceListLoading: false,
        coverageListLoading: false,
        coverageList: [],
        coverageForm: {},
        dialogCoverageTitle: '',
        priceList: null,
        editForm: {},
        dialogPriceTitle: '',
        dialogPriceVisible: false,
        priceForm: {},
        brandList: [],
        seriesList: [],
        modelList: [],
        currBrand: null,
        currSeries: null,
        currModel: null,
        rules: {
          required: [
            { required: true, message: '必填', trigger: 'blur' }
          ]
        }
      }
    },
    filters: {
    },
    created() {
      // this.fetchMealType()
      this.fatchSelectDate()
    },
    methods: {
      fatchSelectDate(mealType) {
        setMealApi.listMealType().then(response => {
          console.log(response)
          this.mealTypeList = response.data
          if (response.data.length > 0) {
            if (mealType) {
              for (let i = 0; i < response.data.length; i++) {
                if (mealType === response.data[i].mealType) {
                  this.mealType = mealType
                  this.fetchData(mealType)
                }
              }
            } else {
              this.mealType = response.data[0].mealType
              this.fetchData(response.data[0].mealType)
            }
          }
        })
      },
      fetchData(mealType) {
        setMealApi.listSetMealByType(mealType).then(response => {
          console.log(response)
          this.list = response.data
          this.listLoading = false
        })
      },
      fetchPriceData(data) {
        this.priceListLoading = true
        this.dialogFormVisible = true
        setMealApi.handleEditPrice(data).then(response => {
          console.log(response)
          this.priceList = response.data
          this.priceListLoading = false
        })
      },
      handleEditPrice(index, row) {
        this.setMeal2Price = JSON.parse(JSON.stringify(row))
        this.fetchPriceData(this.setMeal2Price)
      },
      mealTypeChange() {
        this.fetchData(this.mealType)
      },
      handleAdd() {
        this.dialogEditTitle = '新增套餐'
        this.dialogEditVisible = true
        this.editForm = {}
      },
      handleEdit(index, row) {
        this.dialogEditTitle = '编辑套餐'
        this.dialogEditVisible = true
        this.editForm = JSON.parse(JSON.stringify(row))
      },
      submit() {
        console.log(this.editForm)
        if (this.editForm.id != null && this.editForm.id !== '') {
          setMealApi.updateSetMeal(this.editForm).then(res => {
            this.dialogEditVisible = false
            let i = 0
            for (; i < this.mealTypeList.length; i++) {
              if (this.mealTypeList[i].mealType === this.editForm.mealType) {
                break
              }
            }
            if (this.mealTypeList.length === i) {
              this.fatchSelectDate(this.editForm.mealType)
            }
          })
        } else {
          setMealApi.saveSetMeal(this.editForm).then(res => {
            this.dialogEditVisible = false
          })
        }
      },
      // 价格设置
      handlePriceAdd() {
        this.dialogPriceTitle = '新增价格'
        this.dialogPriceVisible = true
        this.priceForm = {
          mealType: this.setMeal2Price.mealType,
          mealScope: this.setMeal2Price.mealScope,
          country: this.setMeal2Price.country,
          isNew: this.setMeal2Price.isNew,
          mileageRange: this.setMeal2Price.mileageRange,
          carAgeRange: this.setMeal2Price.carAgeRange,
          priceRange: this.setMeal2Price.priceRange,
          insuranceYear: this.setMeal2Price.extendYear,
          insurancePrice: this.setMeal2Price.insurancePrice,
          quantity: this.setMeal2Price.quantity,
          carBrandId: 0,
          carSeriesId: 0,
          carModelId: 0
        }
      },
      submitPrice() {
        console.log(this.priceForm)
        console.log(this.currBrand)
        console.log(this.currSeries)
        console.log(this.currModel)
        setMealApi.saveMealPrice(this.priceForm).then(res => {
          this.dialogPriceVisible = false
          this.fetchPriceData(this.setMeal2Price)
        })
      },
      changeCar(type, item) {
        console.log(item)
        if (type === 1) {
          // 车品牌选择改变
          this.currBrand = item
        } else if (type === 2) {
          this.currSeries = item
        } else if (type === 3) {
          this.currModel = item
        }
      },
      fetchCoverageData() {
        this.coverageListLoading = true
        setMealApi.getCoverageBySetMeal(this.mealType).then(res => {
          console.log(res)
          this.coverageList = res.data
          this.coverageListLoading = false
        })
      },
      handleShowCoverage() {
        this.dialogCoverageVisible = true
        this.fetchCoverageData()
      },
      // 打开新增保额弹框
      handleCoverageAdd() {
        this.coverageForm = {
          mealType: this.mealType,
          priceType: 1,
          carModelId: 0,
          carSeriesId: 0,
          carBrandId: 0
        }
        this.dialogCoverageTitle = '新增保额'
        this.dialogCoverageFormVisible = true
      },
      submitCoverage(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            setMealApi.saveCoverage(this.coverageForm).then(res => {
              if (res.status === '200') {
                this.dialogCoverageFormVisible = false
                this.fetchCoverageData()
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

